<template>
  <!-- 时间 -->
  <div>
    <el-date-picker style="width: 100%;" v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
      start-placeholder="开始日期" end-placeholder="结束日期" :default-value="timeDefaultShow" :picker-options="pickerOptions"
      @change="changeTime" size="small" value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
  </div>
</template>
<script>
import moment from "moment";
export default {
  name: 'SearchTime',
  props: {
    clearTime: { // 重置时
      type: Boolean,
      required: false
    },
    initTime: { // 初始化时给定默认时间
      type: Array,
      required: false
    },
    disableTime: {
      type: String,
      default: ''
    }
  },
  watch: {
    clearTime: function (value) {
      if (value === true) {
        this.time = ''
      }
    },
    initTime: function (val) {
      this.time = [new Date(val[0]), new Date(val[1])]
      this.$emit('getTimes', [val[0], val[1]])
    }
  },
  data() {
    return {
      time: '',
      // 快捷选项选择日期
      pickerOptions: {
        // disabledDate: (time) => {
        //   return this.dealDisabledDate(time)
        // },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              // const start = new Date()
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [end, end])
            }
          },
          {
            text: '最近三天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      timeDefaultShow: ''
    }
  },
  created() {
      this.timeDefaultShow = new Date();
      this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
  },
  methods: {
    setDate() {
      const today = new Date();
      const todayBegin = moment(today).format("yyyy-MM-DD") + " 00:00:00";
      const todayEnd = moment(today).format("yyyy-MM-DD") + " 23:59:59";
      this.time = [todayBegin, todayEnd];
    },
    changeTime(val) {
      this.$emit('getTimes', val)
    },
    dealDisabledDate(time) { // 禁止选择的时间段
      var times = Date.now()
      if (this.disableTime === '') {
        // return time
      } else if (this.disableTime === 'before') { // 禁止选择今天之前的时间
        return time.getTime() < new Date().getTime() - 86400000
      } else if (this.disableTime === 'after') { // 禁止选择今天之后的时间
        return time.getTime() > times
      }
    }
  }
}
</script>
